<template>

  <header class="flex  p-4 w-full box-border items-center justify-between">
    <div class="left flex items-center">
      <a href="/" class="block h-14 w-70 bg-center	bg-no-repeat	bg-contain" style="background-image: url('/icons/logo.png');">

      </a>
      <ul class="nav flex items-center m-l-10">
        <li :class="['nav-item', { active: active1 }]">
          <nuxt-link to="/chat" >AI助手</nuxt-link>
        </li>
        <li :class="['nav-item', { active: active2 }]">
          <nuxt-link to="/draw">AI绘画</nuxt-link>
        </li>
        <li :class="['nav-item', { active: active3 }]">
          <nuxt-link to="/apps">AI应用</nuxt-link>

        </li>
        <li :class="['nav-item', { active: active4 }]">
          <nuxt-link to="/works">作品社区</nuxt-link>

        </li>
        <li :class="['nav-item', { active: active5 }]">
          <nuxt-link to="/user/vip">会员服务</nuxt-link>

        </li>
        <li :class="['nav-item', { active: active6 }]">
          <nuxt-link to="https://www.codinghou.cn/course/freeCourseTopic?tab=4" target="_blank">免费教程</nuxt-link>

        </li>

      </ul>
    </div>

    <div class="right flex justify-center items-center">
      <div class="score w-25 p-l-3 text-center m-r-5 cursor-pointer">
        <NuxtLink to="/user/vip">
          {{ totalBalance }} 积分

        </NuxtLink>

      </div>
      <div class="account" v-if="userInfo">

        <div class="info text-center" @click="showMenu" v-if="userInfo?.id">
          <img :src="userInfo?.avatar" alt="" class="avatar w-8 h-8 mx-auto" />
          <span class="name">{{ userInfo?.nickname }}</span>

        </div>

        <el-dropdown ref="userDropDownMenu" popper-class="popper-headmenu" trigger="contextmenu">
          <div class="nickname text-white">{{ userInfo?.nickname }}</div>
          <template #dropdown>
            <el-dropdown-menu>


              <el-dropdown-item class="link1 link" @click="goLink1">
                我的作品
              </el-dropdown-item>

              <el-dropdown-item class="link3 link" @click="goLink4">
                  个人设置
              </el-dropdown-item>

              <el-dropdown-item class="link4 link" @click="handleSignOut">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div class="account" v-else>
        <div class="btn btn-login" @click="showLoginModal">
          <span class="text cursor-pointer"> 登录/注册</span>
        </div>
      </div>
    </div>



  </header>
  <ClientOnly>
    <PublicCptLoginModal />
  </ClientOnly>
  <PublicCptWorkInfoPreviewModal :visible="previewModalVisible" :currentWorkInfo="currentWorkInfo">
  </PublicCptWorkInfoPreviewModal>
</template>
<script setup lang="ts">
import PublicCptWorkInfoPreviewModal from '~/components/public/CptWorkInfoPreviewModal.vue';
import PublicCptLoginModal from '~/components/public/CptLoginModal.vue';

import { ref, computed, watch } from 'vue';
import { useRoute } from 'vue-router'
import { useAppStore } from "~/stores/app";
let app = useAppStore();
let { toggleLoginModal, info: appInfo, refreshBalance, resetBalance,  } = app;
let { previewModalVisible, currentWorkInfo } = toRefs(app)
let { totalBalance } = toRefs(app)
const route = useRoute()
const currentRoute = ref(route.path)
watch(() => route.path, (newPath) => {
  currentRoute.value = newPath
})
let active1 = computed(() => currentRoute.value.indexOf('/chat') > -1)
let active2 = computed(() => currentRoute.value.indexOf('/draw') > -1)
let active3 = computed(() => currentRoute.value.indexOf('/apps') > -1)
let active4 = computed(() => currentRoute.value.indexOf('/works') > -1)
let active5 = computed(() => currentRoute.value.indexOf('/vip') > -1)
let active6 = ref(false)


const isLoggedIn = ref(false);

function showLoginModal() {
  toggleLoginModal();
}

function handleSignOut() {
  resetBalance()
  storage.remove("token");
  signOut({ callbackUrl: "/" })
    .then((res) => { })
    .catch((err) => {
      ElMessage.warning("操作失败，请重试");
    });
}
const userDropDownMenu = ref<any>();

function showMenu() {
  userDropDownMenu.value.handleOpen();

}
const {
  signIn,
  token,
  data: userInfo,
  status,
  lastRefreshedAt,
  signOut,
  getSession,
} = useAuth();
let router = useRouter();

let goLink1 = () => {
  let pathResovle = router.resolve("/draw/myTask");
  window.location.href = pathResovle.path;
}
function goLink4() {
  let pathResovle = router.resolve("/user/setting");
  window.location.href = pathResovle.path;
}
onMounted(() => {
  if (token.value) {
    refreshBalance()
  }
})
watch(() => token.value, (newToken) => {
  if (newToken) {
    refreshBalance()
  }
})
</script>
<style lang="scss">
.nav-item {
  background: #F3F4F9;
  position: relative;

  @apply py-2 px-5 m-2 rounded-s;

  &.active {

    background: #1E255A;
    color: #fff;

    &::after {
      content: '';
      position: absolute;
      bottom: -0.6rem;
      /* 调整三角形的位置 */
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 0.7rem solid transparent;
      border-right: 0.7rem solid transparent;
      border-top: 0.9rem solid #1E255A;
      /* 三角形的颜色 */
    }
  }
}

header {
  .right {
    .score {
      height: 32px;
      line-height: 32px;
      border-radius: 32px;
      color: #7A4916;
      background: url('https://cdn.codinghou.cn/coding/pc-ai/icons/icon_lighting.png')#F3F4F9 8px center no-repeat;


    }
  }
}
</style>